<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1200px" append-to-body>
        <el-table v-loading="loading" :data="tableData" border script height="500px">
            <el-table-column label="达人ID" width="140" prop="expert_id" fixed></el-table-column>
            <el-table-column label="handle" width="160" prop="expert_name" fixed>
                <template slot-scope="scope">
                    <el-link type="primary" @click="gotoPersonalDetail(scope.row)">{{ scope.row.expert_name }}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="主页" width="160" prop="link">
                <template slot-scope="scope">
                    <el-link v-if="scope.row.link" type="primary" :href="scope.row.link" target="_blank">{{ scope.row.link }}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="合作日期" width="160" prop="cooperate_time"></el-table-column>
            <el-table-column label="建联人" width="120" prop="operater"></el-table-column>
            <el-table-column label="合作平台" width="160" prop="platform_id">
                <template slot-scope="scope">
                    {{ scope.row.platform_id | formatLabelByValueFuzzy(PLATFORM_TYPE) }}
                </template>
            </el-table-column>
            <el-table-column label="联系方式" width="160" prop="email"></el-table-column>
            <el-table-column label="合作方式" width="120" prop="cooperate_type">
                <template slot-scope="scope">
                    {{ scope.row.cooperate_type | formatLabelByValueFuzzy(COOPERATION_TYPE) }}
                </template>
            </el-table-column>
            <el-table-column label="合作状态" width="120" prop="cooperate_status">
                <template slot-scope="scope">
                    {{ scope.row.cooperate_status | formatLabelByValueFuzzy(COOPERATION_STATUS) }}
                </template>
            </el-table-column>
            <el-table-column label="视频SPU" width="140" prop="spu"></el-table-column>
            <el-table-column label="寄件SKU" width="140" prop="sku"></el-table-column>
            <el-table-column label="物流状态" width="140" prop="fulfillment_status">
                <template slot-scope="scope">
                    {{ scope.row.fulfillment_status | formatLabelByValueFuzzy(FULFILLMENT_STATUS) }}
                </template>
            </el-table-column>
            <el-table-column label="超时日期" width="160" prop="expire_time"></el-table-column>
            <el-table-column label="备注" width="160" prop="remarks"></el-table-column>
            <el-table-column label="是否超时" width="100" prop="is_out">
                <template slot-scope="scope">
                    {{ scope.row.is_out | formatLabelByValueFuzzy(IS_TIMEOUT) }}
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <!-- <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button> -->
        </div>
    </el-dialog>
</template>

<script>
import { getOrderCooperateInfo, getExpert, getShop } from '@/api/expert'
import { COOPERATION_STATUS, PLATFORM_TYPE, LOGISTICS_STATUS, COOPERATION_TYPE, IS_TIMEOUT } from '@/views/expert/constant'
export default {
    name: 'DetailDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        expert_id: {
            type: [String, Number],
            default: '',
        },
    },
    data() {
        return {
            loading: false,
            save: false,
            model: {
                id: '',
                expert_name: undefined,
                email: undefined,
                kol_family_name: undefined,
                kol_phone: undefined,
                platform: undefined,
                country: undefined,
                address: undefined,
                province: undefined,
                city: undefined,
                post_code: undefined,
                link: undefined,
                quotation: undefined,
                fan: undefined,
                remarks: undefined,
                fb_admin_id: undefined,
                is_cooperate: undefined,
                type: undefined,
            },
            rules: {},
            COOPERATION_STATUS, // 合作状态
            PLATFORM_TYPE, // 平台
            COOPERATION_TYPE, // 合作方式
            LOGISTICS_STATUS, // 物流状态
            IS_TIMEOUT, // 是否超时
            FULFILLMENT_STATUS: LOGISTICS_STATUS,
            expertList: [],
            shopList: [],
            tableData: [],
        }
    },
    computed: {
        title() {
            return `合作次数明细`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },

    async created() {
        try {
            const [expertData, shopData] = await Promise.all([getExpert(), getShop()])
            this.expertList = expertData?.data ?? []
            this.shopList = shopData?.data ?? []
        } catch (error) {
            console.log(error)
        }
        this.getData()
    },
    methods: {
        gotoPersonalDetail({ expert_id }) {
            this.$router.push({
                path: '/kol/expertView',
                query: {
                    expert_id: expert_id,
                },
            })
        },
        getData() {
            this.loading = true
            getOrderCooperateInfo({ expert_id: this.expert_id })
                .then(res => {
                    this.tableData = res.data ?? []
                })
                .finally(() => {
                    this.loading = false
                })
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return
                }

                const params = { ...this.model }
                params.expert_name = this.expertList.find(item => item.expert_id === params.expert_id).expert_name
                // params.expire_time = '2025-07-14'
                if (this.save) {
                    return
                }
                this.save = true
                if (this.isEdit) {
                    editCooperateOrder(params)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                } else {
                    addCooperateOrder(params)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                }
            })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style></style>
